<template>
    <view @tap.stop.prevent="SO_close_Fn" :class="'mask1 div_right_mask ' + div_right_mask_class" v-if="div_right_flag">
        <view @tap.stop.prevent="blankFn" :class="'div_right_box ' + div_right_box_class">
            <view class="div_left_so">
                <view class="tbody">{{ SO_title }}</view>
                <form @submit="SO_form_uid_submitFn" class="form_uid">
                    <input
                        autocomplete="off"
                        @blur="SO_uid_bindblurFn"
                        @confirm="index_SO_uid_submitFn2"
                        class="input"
                        confirmType="search"
                        maxlength="20"
                        name="keyword"
                        placeholder="按用户ID/昵称"
                        type="text"
                        :value="keyword"
                    />
                    <button class="ico" formType="submit" style="z-index: 9"></button>
                    <input hidden name="sokind" type="text" value="keyword" />
                </form>
                <form @submit="SO_submitFn" @reset.stop.prevent="SO_resetFn" class="form_ext" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor">
                    <block v-for="(item, index) in SO" :key="index">
                        <div class="listbox" v-if="item.fkind == 'range' || item.fkind == 'area'">
                            <picker
                                @change="areaidFn"
                                @columnchange="areaidChangeFn"
                                class="dl"
                                :data-f="item.f"
                                :data-idx="index"
                                :data-kind="item.kind"
                                :headerText="'请选择' + item.tbody"
                                mode="multiSelector"
                                :range="item.arr.def"
                                rangeKey="v"
                                :value="item.arr.idx"
                                v-if="item.fkind == 'area'"
                            >
                                <view class="dt">{{ item.tbody }}</view>
                                <view class="dd">
                                    <view :class="'span' + (!WXS.empty(item.v) ? ' ed' : '')">{{ item.v }}</view>
                                </view>
                            </picker>
                            <picker
                                @change="SO_rangFn"
                                class="dl"
                                :data-f="item.f"
                                :data-index="index"
                                :headerText="'请选择' + item.tbody"
                                mode="multiSelector"
                                :range="item.arr.arr"
                                rangeKey="v"
                                :value="item.arr.def"
                                v-else
                            >
                                <view class="dt">{{ item.tbody }}</view>
                                <view class="dd">
                                    <view :class="'span' + (!WXS.empty(item.v) ? ' ed' : '')">{{ item.v }}</view>
                                </view>
                            </picker>
                        </div>

                        <block v-else>
                            <navigator class="listbox" hoverClass="none" url="/pagesA/my_vip/my_vip" v-if="item.f == 'child'">
                                <view class="dl listdl_tips">
                                    <view class="dt">以下仅对VIP会员开放</view>
                                    <view class="dd">
                                        <view class="btn2">
                                            <text class="i ico"></text>
                                            开通VIP
                                        </view>
                                    </view>
                                </view>
                            </navigator>
                            <view class="tbox">
                                <view @tap.stop.prevent="SO_onoffFn" :class="'h5 ' + item.onoff + (item.auth == 'vip' ? ' C999' : '')" :data-index="index">{{ item.tbody }}</view>
                                <view :class="'ul def ' + (item.ulcls == 'col2' ? item.ulcls : 'col3')" :style="'display:' + (item.onoff == 'on' ? 'block' : 'none')">
                                    <view
                                        @tap.stop.prevent="SO_liFn"
                                        :class="'li' + (WXS.indexOf(item.i, item2.i) ? ' ed' : '')"
                                        :data-auth="item.auth"
                                        :data-fkind="item.fkind"
                                        :data-i="item2.i"
                                        :data-idx="index"
                                        v-for="(item2, idx2) in item.arr"
                                        :key="idx2"
                                    >
                                        {{ item2.v }}
                                    </view>
                                </view>
                            </view>
                        </block>

                        <input hidden :name="item.f" type="text" :value="item.i" />

                        <input hidden :name="item.f + '_str'" type="text" :value="item.v" />
                    </block>
                    <input hidden name="sokind" type="text" value="ext" />
                    <view class="savebox">
                        <button class="reset" formType="reset">重置</button>
                        <button class="ico" formType="submit"> 确定</button>
                    </view>
                    <view class="blank"></view>
                </form>
            </view>
        </view>
    </view>
</template>

<style>
@import 'SO.css';
</style>
